
var mSystemModal = null;
Vue.component('m-system-modal', {
	template: `
<el-dialog
	class="m-system-modal"
  title="系统设置"
  :visible.sync="visible"
  width="600px"
  :close-on-click-modal="false">
  <el-form :model="form" :rules="rules" ref="form" label-width="6em">
  	<el-card class="mb-15" header="采集源设置">
  		<el-form-item class="mb-25" label="采集源" prop="realtime_type">
		    <el-radio-group v-model="form.realtime_type" size="medium" @change="changeRealtimeType">
		    	<el-radio style="width:190px;" :label="1" border>超声设备</el-radio>
		    	<el-radio style="width:190px;" :label="-1" border>本地文件</el-radio>
			  </el-radio-group>
		  </el-form-item>
		  <el-form-item v-if="form.realtime_type == 1" class="mb-25" label="采集通道" prop="realtime_streaming">
		  	<div class="flex">
		  		<el-select class="mr-20" style="width:190px;" v-model="form.realtime_streaming">
				  	<el-option label="台式机" :value="0"></el-option>
				  	<el-option label="笔记本" :value="1"></el-option>
				  	<el-option label="其它输入" :value="2"></el-option>
				  </el-select>
				  <el-input-number v-if="form.realtime_streaming == 2" style="width:190px;" v-model="form.realtime_streaming_ipt" :min="2"></el-input-number>
		  	</div>
		  </el-form-item>
		  <el-form-item v-if="form.realtime_type == -1" class="mb-25" label="读取路径" prop="video_address">
	  		<el-select style="width: 90%;" v-model="form.video_address" placeholder="请选择或输入读取路径" allow-create filterable>
			  	<el-option v-for="(item, index) in pathList" :key="index" :label="item.name" :value="item.path"></el-option>
			  </el-select>
		  </el-form-item>
  	</el-card>
  	<el-card class="mb-15" header="采集分辨率设置">
		  <el-form-item class="mb-25" label="分辨率宽高" prop="capture_px">
		  	<div class="flex">
			  <el-input style="width:190px;margin-right:20px;" v-model="form.capture_width_px" placeholder="宽度未设置" @blur="captureBlur('capture_width_px')">
					<template slot="append">PX</template>
				</el-input>
				<el-input style="width:190px;" v-model="form.capture_height_px" placeholder="高度未设置" @blur="captureBlur('capture_height_px')">
					<template slot="append">PX</template>
				</el-input>
			</div>
		  </el-form-item>
  	</el-card>
  	<el-card class="mb-15" header="参数设置">
  		<el-form-item class="mb-25" label="抽帧" prop="need_extract_frame">
		    <el-radio-group v-model="form.need_extract_frame" size="medium">
		    	<el-radio style="width:190px;" :label="true" border>是</el-radio>
		    	<el-radio style="width:190px;" :label="false" border>否</el-radio>
			  </el-radio-group>
		  </el-form-item>
		  <el-form-item v-if="form.need_extract_frame" class="mb-25" label="抽帧数" prop="extract_frame_number">
		    <el-input-number style="width:190px;" v-model="form.extract_frame_number" :min="2"></el-input-number>
		  </el-form-item>
  	</el-card>
  	<el-card class="mb-15" header="单位设置">
  		<el-form-item class="mb-25" label="单位名称" prop="org_name">
		    <el-input style="width: 90%;" v-model="form.org_name" placeholder="请输入单位名称"></el-input>
		  </el-form-item>
		  <el-form-item class="mb-25" label="报告医生" prop="doctor">
		    <el-input style="width: 90%;" v-model="form.doctor" placeholder="请输入报告医生"></el-input>
		  </el-form-item>
  	</el-card>
  	<el-card header="导出设置">
  		<el-form-item class="mb-25" label="导出密码" prop="password">
		    <el-input style="width: 90%;" v-model="form.password" placeholder="请输入导出密码" show-password></el-input>
		  </el-form-item>
  	</el-card>
	  	
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="saveSystemInfo()">提 交</el-button>
  </span>
</el-dialog>
	`,
	data() {
		return {
			visible: false,
			form: {
				realtime_type: 1,
				realtime_streaming: 0,
				realtime_streaming_ipt: 2,
				video_address: '',
				capture_width_px: '',
				capture_height_px: '',
				need_extract_frame: true,
				extract_frame_number: 2,
				org_name: '',
				doctor: '',
				password: '', // 导出密码
			},
			rules: {
				realtime_type: [
					{ required: true, message: '请选择采集源', trigger: 'blur' },
				],
				realtime_streaming: [
					{ required: true, trigger: 'blur', validator: (rule, value, callback) => {
						if(this.form.realtime_type == 1 && !(this.form.realtime_streaming >= 0)) {
							callback(new Error('请选择采集通道'));
						} else {
							callback();
						}
					} },
				],
				video_address: [
					{ required: true, trigger: 'blur', validator: (rule, value, callback) => {
						if(this.form.realtime_streaming == 0 && !this.form.video_address.length) {
							callback(new Error('请输入读取路径'));
						} else {
							callback();
						}
					} },
				],
				need_extract_frame: [
					{ required: true, message: '请选择是否抽帧', trigger: 'blur' },
				],
				// capture_width_px: [
				// 	{ required: true, message: '请输入分辨率宽度', trigger: 'blur' },
				// ],
				// capture_height_px: [
				// 	{ required: true, message: '请输入分辨率高度', trigger: 'blur' },
				// ],
				extract_frame_number: [
					{ required: true, trigger: 'blur', validator: (rule, value, callback) => {
						if(this.form.need_extract_frame && !this.form.extract_frame_number) {
							callback(new Error('请输入抽帧数'));
						} else if(this.form.extract_frame_number < 2) {
							callback(new Error('抽帧数不能小于2'));
						} else {
							callback();
						}
					} },
				],
				org_name: [
					{ required: true, message: '请输入单位名称', trigger: 'blur' },
				],
				doctor: [
					{ required: true, message: '请输入报告医生', trigger: 'blur' },
				],
				password: [
					{ required: true, message: '请输入导出密码', trigger: 'blur' },
				],
			},

			// 读取路径
			pathList: [],

		}
	},
	mounted() {
		mSystemModal = this;

		
	},
	methods: {
		open() {
			this.getSystemInfo();

			this.visible = true;
		},

		// 获取系统信息
		getSystemInfo() {
			axios({
				method: 'get',
				url: BASE_API+'/getSystemSettings/'
			}).then(res => {
				if(!res.data.result) {
					return;
				}
				// 格式化数据
				let data = JSON.parse(res.data.data);
				let obj = data[0].fields;
				if(obj.realtime_streaming == -1) {
					this.form.realtime_type = -1;
					this.form.realtime_streaming = -1;
				} else {
					this.form.realtime_type = 1;
					if(obj.realtime_streaming > 1) {
						this.form.realtime_streaming = 2;
						this.form.realtime_streaming_ipt = obj.realtime_streaming;
					} else {
						this.form.realtime_streaming = obj.realtime_streaming;
					}
				}
				this.form.video_address = obj.video_address;

				this.form.capture_width_px = obj.capture_width_px || '';
				this.form.capture_height_px = obj.capture_height_px || '';
				this.form.need_extract_frame = obj.extract_frame_number > 0 ? true : false;
				this.form.extract_frame_number = obj.extract_frame_number;
				this.form.org_name = obj.org_name;
				this.form.doctor = obj.doctor;
				this.form.password = obj.password;

				// 读取路径
				this.pathList = res.data.video_files;
			})
		},

		saveSystemInfo() {
			this.$refs.form.validate(valid => {
				if(!valid) return;

				let params = {}
				if(this.form.realtime_type == 1) {
					if(this.form.realtime_streaming != 2) {
						params.realtime_streaming = this.form.realtime_streaming;
					} else {
						params.realtime_streaming = this.form.realtime_streaming_ipt;
					}
				} else {
					params.realtime_streaming = -1;
					params.video_address = this.form.video_address;
				}
				params.capture_width_px = this.form.capture_width_px || 0;
				params.capture_height_px = this.form.capture_height_px || 0;
				params.extract_frame_number = !this.form.need_extract_frame ? 0 : this.form.extract_frame_number;
				params.org_name = this.form.org_name;
				params.doctor = this.form.doctor;
				params.password = this.form.password;
				axios({
	  			method: 'post',
	  			url: BASE_API+'/updateSystemSettings/',
	  			headers: {
				    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
				  },
				  data: params
	  		}).then(res => {
	  			if(res.data.result) {
	  				this.$notify({
	            duration: 1000,
		          title: '提示',
		          message: '系统设置保存成功',
		          type: 'success'
		        });
		        this.visible = false;
		        window.location.reload();
	  			}
	  		})
			})
		},

		changeRealtimeType(val) {
			if(val == 1) {
				this.form.realtime_streaming = 0;
			} else if(val == -1) {
				this.form.realtime_streaming = -1;
			}
		},

		// 分辨率
		captureBlur(key) {
			if(this.form[key] && !(Number(this.form[key]) > 0)) {
				this.$notify({
          duration: 1000,
          title: '提示',
          message: '请输入大于0整数',
          type: 'error'
        });
        this.form[key] = '';
			}
		}

	}
})


Vue.component('m-layout', {
	template: `
<div class="m-layout">
	<svg-list></svg-list>
	<div class="m-header">
		<div class="logo-box cursor-pointer" @click="reloadPage()">
			<img src="./static/image/logo.png"/>
		</div>
		<div class="user-info-box">
			<div class="list">
				<div class="item" @click="toIndex()">
					<div class="icon">
						<svg-icon name="patient"></svg-icon>
					</div>
					<span>患者中心</span>
				</div>
				<div class="item" @click="showSystem()">
					<div class="icon">
						<i class="el-icon-s-tools"></i>
					</div>
					<span>系统设置</span>
				</div>
				<div class="item">
					<span class="user-name">{{username}}</span>
					<div class="icon" title="退出登录" @click="logout()">
						<svg-icon name="logout"></svg-icon>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="m-body">
		<div class="m-container">
			<slot></slot>
		</div>
	</div>
	

	<m-system-modal ref="mSystemModal"></m-system-modal>
</div>
`,
// <div class="m-footer">建议分辨率1920*1080</div>
	data() {
		return {
			username: ''
		}
	},
	mounted() {
		this.username = window.localStorage.getItem('username') || '';
	},
	methods: {
		logout() {
			var _this = this;
			this.$confirm('此操作将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.location.href = "./login.html";
      }).catch(() => {});
		},

		// 去患者中心
		toIndex() {
			if(location.pathname.indexOf('/videoRecord.html') != -1 && location.search.indexOf('&detailId=') == -1) {
				this.$confirm('检查记录未保存, 是否离开?', '提示', {
	        confirmButtonText: '确定',
	        cancelButtonText: '取消',
	        type: 'warning'
	      }).then(() => {
	        window.location.href = "./index.html";
	      }).catch(() => {});
			} else {
				window.location.href = "./index.html";
			}
		},

		// 显示系统设置
		showSystem() {
			this.$refs.mSystemModal.open();
		},

		reloadPage() {
			window.location.reload();
		}
	}
})

Vue.component('m-checkbox', {
	template: `<div class="m-checkbox" :class="{'is-checked': value == trueLabel}" :style="{width: size+'px', height: size+'px'}" @click.stop="changeChecked">
		<div v-if="!type" class="m-checkbox-bg">
			<svg width="100%" height="100%" viewBox="0 0 100 100">
	      <path d="M 18,50 L 42,78 L 90,25" fill="none" :stroke="color" stroke-width="10"></path>
	    </svg>
		</div>
    <template v-else-if="type == 'collect'">
	    <svg-icon v-if="!value" name="collect-false" :style="{color:'#ffffff', fontSize: size+'px'}"/>
	    <svg-icon v-else name="collect-true" :style="{color:'#E6A23C', fontSize: size+'px'}"/>
    </template>
	</div>`,
	model: {
		prop: 'value',
		event: 'changeValue'
	},
	props: {
		value: {
			type: [Number,Boolean,String],
			default: ''
		},
		trueLabel: {
			type: [Number,Boolean,String],
			default: true
		},
		falseLabel: {
			type: [Number,Boolean,String],
			default: false
		},
		size: {
			type: [String,Number],
			default: '16'
		},
		color: {
			type: String,
			default: '#000000'
		},
		// 类型，如collect收藏
		type: {
			type: String,
			default: ''
		}
	},
	mounted() {
		console.log(this.type);
	},
	methods: {
		changeChecked() {
			this.$emit('changeValue', this.value == this.trueLabel ? this.falseLabel : this.trueLabel);
			this.$emit('change');
		}
	}
})

const svgList = [
	{name: 'home', html: `<path d="M582.4 83.2l320 204.8c38.4 25.6 57.6 64 57.6 108.8v441.6c0 70.4-57.6 128-128 128l-172.8 0c-38.4 0-64-25.6-64-64v-224c0-19.2-12.8-32-32-32l-108.8 0c-12.8 0-25.6 12.8-32 25.6l0 6.4v224c0 38.4-25.6 64-64 64l-172.8 0c-70.4 0-128-57.6-128-128v-441.6c0-44.8 19.2-83.2 57.6-108.8l320-204.8c51.2-25.6 102.4-25.6 147.2 0z m-44.8 64c-19.2-12.8-38.4-12.8-57.6 0l-320 204.8c-12.8 12.8-19.2 32-19.2 44.8v441.6c0 25.6 25.6 51.2 51.2 51.2l140.8 0c6.4 0 12.8-6.4 12.8-19.2v-204.8c0-51.2 44.8-96 96-96l96 0 38.4 0c51.2 0 96 44.8 96 96l0 204.8c0 6.4 6.4 12.8 12.8 12.8l6.4 0 140.8 0c25.6 0 44.8-19.2 51.2-44.8l0-6.4v-435.2c0-19.2-6.4-32-25.6-44.8l-320-204.8z" transform="matrix(1,0,0,1,0,0)"></path>`},
	{name: 'patient', html: `<path d="M513.365 76.459c241.297 0 436.907 195.61 436.907 436.906 0 241.297-195.61 436.907-436.907 436.907-241.297 0-436.906-195.61-436.906-436.907 0-241.297 195.61-436.906 436.906-436.906z m0 218.453c-120.648 0-218.453 97.805-218.453 218.453 0 120.649 97.805 218.454 218.453 218.454 59.535 0 113.506-23.815 152.91-62.438l-61.794-61.794c-23.585 22.813-55.711 36.85-91.116 36.85-72.389 0-131.072-58.683-131.072-131.072 0-72.389 58.683-131.072 131.072-131.072 27.743 0 53.473 8.62 74.657 23.326l62.386-62.385c-37.477-30.226-85.147-48.322-137.043-48.322z m196.608 131.072c-36.194 0-65.536 29.341-65.536 65.536s29.342 65.536 65.536 65.536c36.195 0 65.536-29.341 65.536-65.536s-29.341-65.536-65.536-65.536z"></path>`},
	{name: 'logout', html: `<path d="M581.632 697.344l126.976 0 0 194.56q0 33.792-10.24 58.88t-27.136 40.96-39.424 23.552-48.128 7.68l-452.608 0q-24.576 0-48.128-9.728t-41.472-27.136-29.184-40.96-11.264-52.224l0-706.56q0-24.576 11.776-47.104t30.208-39.936 40.96-28.16 45.056-10.752l449.536 0q26.624 0 50.176 11.776t41.472 29.696 28.16 40.448 10.24 44.032l0 188.416-126.976 0 1.024-195.584-452.608 0-1.024 713.728 452.608 0 0-195.584zM1021.952 505.856q37.888 30.72 2.048 60.416-20.48 15.36-44.544 37.888t-50.176 46.592-51.712 47.616-47.104 40.96q-23.552 18.432-40.448 18.432t-16.896-24.576q2.048-14.336 0.512-35.84t-1.536-36.864q0-17.408-12.288-21.504t-29.696-4.096l-40.96 0-62.464 0q-34.816 0-73.216-0.512t-73.216-0.512l-62.464 0-41.984 0q-8.192 0-17.92-1.536t-17.408-6.656-12.288-14.336-4.608-23.552q0-19.456-0.512-46.08t0.512-47.104q0-27.648 13.312-37.888t43.008-9.216l33.792 0 59.392 0q32.768 0 70.144 0.512t71.168 0.512l61.44 0 38.912 0q25.6 1.024 43.52-4.096t17.92-22.528q0-14.336 1.024-32.256t1.024-32.256q0-23.552 12.8-29.696t32.256 9.216q19.456 16.384 45.568 38.4t52.736 45.056 52.736 45.568 47.616 39.936z" p-id="6103"></path>`},
	{name: 'collect-false', label: '未收藏', html: `<path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24zM551.786667 756.032l170.976 106.24c2.624 1.621333 5.717333 2.122667 8.650666 1.408 6.410667-1.557333 10.56-8.426667 8.928-15.424l-46.485333-198.24a77.141333 77.141333 0 0 1 24.277333-75.733333L870.293333 441.706667c2.485333-2.165333 4.053333-5.312 4.330667-8.746667 0.565333-7.136-4.490667-13.173333-10.976-13.696l-199.712-16.288a75.989333 75.989333 0 0 1-64.064-47.168l-76.938667-188.16a12.309333 12.309333 0 0 0-6.538666-6.741333c-5.898667-2.496-12.725333 0.373333-15.328 6.741333l-76.949334 188.16a75.989333 75.989333 0 0 1-64.064 47.168l-199.701333 16.288a11.68 11.68 0 0 0-7.978667 4.181333 13.226667 13.226667 0 0 0 1.333334 18.261334l152.16 132.586666a77.141333 77.141333 0 0 1 24.277333 75.733334l-46.485333 198.229333a13.333333 13.333333 0 0 0 1.514666 9.877333c3.488 5.792 10.581333 7.530667 16.064 4.128l170.986667-106.229333a75.296 75.296 0 0 1 79.562667 0z" fill="currentColor" p-id="4830"></path>`},
	{name: 'collect-true', label: '已收藏', html: `<path d="M512 760.224L298.944 918.08c-22.08 16.32-53.536 12.16-70.272-9.376a47.904 47.904 0 0 1-8-43.968l82.144-259.936-219.136-163.328a48.096 48.096 0 0 1-9.376-68.544c9.472-12.096 24.192-19.2 39.776-19.2l268.64-0.448 81.408-254.88c8.224-25.792 36.32-40.16 62.784-32.16 15.744 4.8 28.064 16.8 32.96 32.16l81.408 254.88 268.64 0.448c27.712 0.032 50.112 21.952 50.08 48.96 0 15.2-7.296 29.536-19.68 38.784l-219.136 163.328 82.144 259.936c8.16 25.792-6.688 53.184-33.152 61.12a51.2 51.2 0 0 1-45.12-7.776L512 760.224z" fill="currentColor" p-id="4990"></path>`},	
]
Vue.component('svg-list', {
	template: ` 
<svg style="position: absolute; width: 0; height: 0" aria-hidden="true">
	<symbol v-for="(item, index) in list" :key="index" viewBox="0 0 1024 1024" :id="'icon-'+item.name" v-html="item.html"></symbol>
</svg>
	 `,
	data() {
		return {
			list: svgList
		}
	}
})

Vue.component('svg-icon', {
	template: `
<div class="svg-icon">
	<svg v-bind="$attrs">
	    <use :xlink:href="'#icon-'+name"></use>
	</svg>
</div> 
	 `,
	props: {
		name: {
			type: String,
			default: ''
		}
	},
	mounted() {
		// console.log(this.$attrs);
	}
})



